{% extends "waterq/base.html" %}
{% load tethys_gizmos staticfiles %}

{% block styles %}
{{ block.super }}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin="" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="{% static 'waterq/css/main.css' %}" rel="stylesheet" />
<link href="{% static 'waterq/css/maps.css' %}" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw@1.0.2/dist/leaflet.draw.css" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Muli" />
{% endblock %}


{% block scripts %}
{{ block.super }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://highcharts.github.io/export-csv/export-csv.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
        integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
        crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.sync@0.2.4/L.Map.Sync.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
        integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
        crossorigin="anonymous"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/mejackreed/Leaflet-IIIF/v2.0.1/leaflet-iiif.js"></script>
<script src="https://unpkg.com/leaflet-draw@1.0.2/dist/leaflet.draw.js"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" type="text/javascript"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="{% static 'waterq/js/main.js' %}" type="text/javascript"></script>
<script src="{% static 'waterq/js/maps.js' %}" type="text/javascript"></script>
{% endblock %}

{% block header_buttons %}
<div class="header-button glyphicon-button" data-toggle="tooltip" data-placement="bottom" title="Help">
    <a data-toggle="modal" data-target="#help-modal"><span class="glyphicon glyphicon-question-sign"></span></a>
</div>
{% endblock %}


{% block app_navigation_items %}
<li class="title">App Navigation</li>
<form name="selector" id="options">
    <p id="master">
        <span class="optTitle">Satellite Platform:</span>
        <br>
        <select name="master" id="platform" class="selectors buttontheme" style="width:98%;">
            <option value="modis" selected> Modis</option>
            <option value="sentinel">Sentinel</option>
            <option value="landsat">Landsat</option>
        </select>
    </p>
    <p id="sensorSelect">
        <span class="optTitle" id="missionTitle">Sensor:</span>
        <br>
        <select name="sensor" id="sensor" class="selectors buttontheme" style="width:98%;">
            <option value="aqua" selected>Aqua</option>
            <option value="terra">Terra</option>
            <option value="others">here</option>
        </select>
    </p>
    <p id="correctionSelect">
        <span class="optTitle">Correction Type:</span>
        <br>
        <select name="correction" id="correction" class="selectors buttontheme" style="width:98%;">
            <option value="rrs" selected>RRS</option>
            <option value="toa">TOA</option>
        </select>
    </p>
    <p id="productSelect">
        <span class="optTitle">Product:</span>
        <br>
        <select name="product" id="product" class="selectors buttontheme" style="width:98%;">
            <option value="chla" selected>CHL_A</option>
            <option value="sd">Secchi Depth</option>
        </select>
    </p>
</form>
<form id="date" class="dates">
    <p id="startDate">
        <b>Start Date:</b>
        {% gizmo time_start %}
    </p>
    <p id="endDate">
        <b>End Date:</b>
        {% gizmo time_end %}
    </p>
</form>
<br>
<div>
    <p data-toggle="tooltip">Set variables then add data to the map.  Use the split button to add an additional map in the viewport, then set the variables to load either right or left map.</p>
    <a id="lmapLoad" class="buttontheme" style="float:left; margin:1px;">Load</a>
    <a id="splitMap" class="buttontheme" style="float:left; margin:1px;">Split</a>
    <a id="rmapLoad" class="buttontheme" style="display:none; float:left; margin:1px;">Right</a>
    <br style="clear:both;" />
    <p style="margin:10px 0">Draw AOI or drop a point for the graph data</p>
    <a id="graphLoad" class="buttontheme">Graph variables</a>
</div>
<br />
<div>
    <input type="file" onchange="gloadFile()" />
</div>

{% endblock %}

{% block app_content %}
<div id="map" class="mapfull"></div>
<div id="map2" style="display:none;"></div>


    {% endblock %}

    {% block after_app_content %}
<input type="hidden" id="apppath" value="{% url 'waterq:home' %}" />

<!-- Help Modal -->
<div class="modal fade" id="help-modal" tabindex="-1" role="dialog" aria-labelledby="help-modal-label">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title" id="help-modal-label">Help</h5>
            </div>
            <div class="modal-body">
                <h1>Disclaimer:</h1>
                <p>This application is currently in Beta. It is not to be used for any operational purpose.The SERVIR Project, NASA, and USAID, make no express or implied warranty of this application and associated data as to the merchantability or fitness for a particular purpose. Neither the US Government nor its contractors shall be liable for special, consequential or incidental damages attributed to this application and associated data.</p>
                <p><a href="https://servirglobal.net/Privacy-Terms-of-Use" target="_blank">Privacy and Terms of Use</a></p>
                <p>For questions, comments and/or concerns <a href="https://servirglobal.net/contact-us">contact us</a> (please reference the Water Quality Viewer)</p>
            </div>
            <div class="modal-footer">
                <div align="center" id="logos">
                    <div class="logo-image"><a href="http://www.usaid.gov/" target="_blank"><img src="https://servirglobal.net/Portals/_default/Skins/Servir2015/img/usaid.png"></a></div>
                    <div class="logo-image"><a href="http://appliedsciences.nasa.gov/" target="_blank"><img src="https://servirglobal.net/Portals/_default/Skins/Servir2015/img/nasa.png"></a></div>
                    <div class="logo-image"><a href="http://www.cilss.bf/" target="_blank"><img src="https://servirglobal.net/Portals/_default/Skins/Servir2015/img/cilss.png"></a></div>
                    <div class="logo-image"><a href="http://www.rcmrd.org/" target="_blank"><img src="https://servirglobal.net/Portals/_default/Skins/Servir2015/img/rcmrd.png"></a></div>
                    <div class="logo-image"><a href="http://www.icimod.org/" target="_blank"><img src="https://servirglobal.net/Portals/_default/Skins/Servir2015/img/icimod.png"></a></div>
                    <div class="logo-image"><a href="http://www.adpc.net/" target="_blank"><img src="https://servirglobal.net/Portals/_default/Skins/Servir2015/img/adpc.png"></a></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="loader" style="display:none; position:absolute; top: calc(50vh - 70px); left: calc(50vw - 60px); padding:20px; background-color: white; border-radius: 15px; ">
    <img id="loaderimage" src="{% static 'waterq/images/loader.gif' %}" />
    <p style="text-align:center">
        Loading Data
    </p>
</div>



<!-- Modal -->
<div class="modal fade" id="chart-modal" tabindex="-1" role="dialog" aria-labelledby="chart-modal-label">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h5 class="modal-title" id="chart-modal-label">Chart</h5>
            </div>
            <div class="modal-body">
                <div class="error"></div>
                <div class="chart-wrapper">
                    <div class="chart-inner" style="width:100%;height:100%;">
                        <div align="center"><img id="view-file-loading" class="view-file hidden" src="{% static 'waterq/images/loader.gif' %}" /></div>
                        <div align="center" id="cube" class="sk-cube-grid hidden">
                            <div class="sk-cube sk-cube1"></div>
                            <div class="sk-cube sk-cube2"></div>
                            <div class="sk-cube sk-cube3"></div>
                            <div class="sk-cube sk-cube4"></div>
                            <div class="sk-cube sk-cube5"></div>
                            <div class="sk-cube sk-cube6"></div>
                            <div class="sk-cube sk-cube7"></div>
                            <div class="sk-cube sk-cube8"></div>
                            <div class="sk-cube sk-cube9"></div>
                        </div>
                        <div id="plotter" name="plotter" style="height:100%;width:100%">
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
    {% endblock %}


